<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- React核心库 -->
  <script src="../build/react.min.js"></script>
  <!-- React-DOM提供与DOM相关的功能  -->
  <script src="../build/react-dom.min.js"></script>
  <!-- Browser.js 的作用是将 JSX 语法转为 JavaScript 语法 -->
  <script src="../build/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
  var RepoList = React.createClass({
    getInitialState: function () {
      return {loading: true, error: null, data: null};
    },

    componentDidMount() {
      this.props.promise.then(
        value => this.setState({loading: false, data: value}),
        error => this.setState({loading: false, error: error}));
    },

    render: function () {
      if (this.state.loading) {
        return <span>Loading...</span>;
      }
      else if (this.state.error !== null) {
        return <span>Error: {this.state.error.message}</span>;
      }
      else {
        var repos = this.state.data.items;
        var repoList = repos.map(function (repo) {
          return (
            <li>
              <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
            </li>
          );
        });
        return (
          <main>
            <h1>Most Popular JavaScript Projects in Github</h1>
            <ol>{repoList}</ol>
          </main>
        );
      }
    }
  });

  ReactDOM.render(
    <RepoList
      promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
    />,
    document.body
  );
</script>
</body>
</html>